/**
 * @file: 收入图表
 * @author: Lengxx
 * @date: 2024-07-15
 */
<template>
  <div class="pt-2 pt-0 h-[300px]">
    <div ref="containRef" class="h-[300px]" ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useECharts } from '@/hooks/web/useECharts'
import { xAixsData } from './data';

const containRef = ref();
const BGLineColor = 'rgb(226, 232, 240, .2)';

const { setOptions, echarts } = useECharts(containRef, 'dark')

onMounted(() => {
  setOptions({
    backgroundColor: '#181c41',
    title: {
      text: '收益曲线图',
      left: 'center',
      top: '4%',
      textStyle: {
        color: BGLineColor,
      }
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: BGLineColor
        }
      },
      data: ['2024-7-1', '2024-7-2', '2024-7-3', '2024-7-4', '2024-7-5', '2024-7-6', '2024-7-7', '2024-7-8', '2024-7-9', '2024-7-10', '2024-7-11'],
    },
    yAxis: [
      {
        name: '收益（元）',
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: BGLineColor
          }
        },
        splitLine: {
          lineStyle: {
            color: BGLineColor
          }
        }
      },
      {
        name: '订单数量',
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: BGLineColor, 
          
        }
      }
    ],
    axisPointer: {
      show: true,
      type: 'line'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,
      containLabel: true,
      borderColor: BGLineColor,
      backgroundColor: 'rgba(0, 0, 0, 0.1)'
    },
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbol: 'emptyCircle',
        symbolSize: 8,
        data: [820, 932, 901, 934, 1290, 1330, 1320, 530, 460, 670, 720],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 216, 255, 0.4)'
          }, {
            offset: 0.8,
            color: 'rgba(0, 216, 255, 0.1)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      },
      {
        type: 'bar',
        barWidth: '24px',
        name: '订单数',
        yAxisIndex: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0.2,
            color: 'rgba(234, 88, 12, 0.6)'
          }, {
            offset: 0.8,
            color: 'rgba(14, 165, 233, 0.5)'
          }, {
            offset: 1,
            color: 'rgba(14, 165, 233, 0)'
          }])
        },
        data: [7, 8, 8, 9, 10, 18, 19, 18, 8, 6, 9, 10]
      }
    ]
  });
})

</script>

<style lang="less" scoped>
</style>
